<template>
  <div class="patient-record-detail">
    <div class="user-info p40">
      <div class="record-cell">基本信息</div>
      <div class="user-detail mt61">
        <div>姓名：{{detail.patientUserCoreDTO.trueName}}</div>
        <div>年龄：{{detail.age}}岁</div>
        <div>性别：<span v-if="detail.sex == 1">男</span><span v-else>女</span></div>
      </div>
    </div>

    <div class="illness-state p40">
      <div class="record-cell">病情自述</div>
      <div class="record-detail mt61">
        {{detail.description}}
      </div>
    </div>
    <div class="check-result p40">
      <div class="record-cell flex-box-align">
        <span class="flex">检查结果</span>
        <span style="font-size: .24rem;color: #999">{{detail.gmtCreateDate}}</span>
      </div>
      <div class="check-detail mt61">
        <div class="check-item flex-box-align">
          <div class="check-txt flex">CT片</div>
          <div class="wrapper previewer-demo-img" @click="show(0)">
            <div class="btn-watch">查看</div>
            <img :src="list[1].src" alt="" >
          </div>
        </div>
        <div class="check-item flex-box-align">
          <div class="check-txt flex">检查结果</div>
          <div class="wrapper previewer-demo-img" @click="show(1)">
            <div class="btn-watch">查看</div>
            <img :src="list[1].src" alt="" >
          </div>
        </div>
        <div class="check-item flex-box-align">
          <div class="check-txt flex">检查处方</div>
          <div class="wrapper previewer-demo-img" @click="show(2)">
            <div class="btn-watch">查看</div>
            <img :src="list[2].src" alt="">
          </div>

        </div>
        <div v-transfer-dom>
          <previewer :list="list" ref="previewer" :options="options"></previewer>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
  import {Previewer, TransferDom} from "vux";

  export default {
    directives: {
      TransferDom
    },
    components: {
      Previewer
    },
    data() {
      return {
        detail: {},
        id: "",
        list: [],
        options: {
          getThumbBoundsFn (index) {
            console.log(index)
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect()
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      }
    },
    mounted() {
      this.id = parseUrlParams("id");
      this.getDetail()
    },
    methods: {
      getDetail() {
        let url = CONSTANT.URL.PATIENT.CASEDETAIL;
          common.requestAjax(url, {}, {id: this.id}, (data) => {
            if (data.status == 200) {
              this.detail = data.data.bussData
              this.list = [
                {src: this.detail.ctPhoto.fileUrl},
                {src: this.detail.checkResultPhoto.fileUrl},
                {src: this.detail.recipePhoto.fileUrl}
              ]
            }
          }, null)
      },
      show (index) {
        console.log(index)
        this.$refs.previewer.show(index)
      }
    }
  };
</script>
<style lang="less">

  .patient-record-detail {
    height: 100%;
    background-color: #f4f4f4;
    font-size: .32rem;

    .record-cell {
      border-left: .04rem solid #0063AE;
      padding-left: .14rem;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        background-color: #d1d1d1;
        bottom: -.3rem;
      }
    }

    .p40 {
      padding: .4rem .3rem .3rem .3rem;
    }

    .mt61 {
      margin-top: .61rem;
    }

    .user-info, .illness-state, .check-result {
      background-color: #fff;
      margin-bottom: .2rem;
    }

    .user-info {
      .user-detail {
        font-size: .28rem;
        div {
          margin-bottom: .3rem;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .illness-state {
      .record-detail {
        font-size: .28rem;
      }
    }
    .check-result {
      .check-detail {
        font-size: .28rem;
        margin-top: .76rem;
        .check-item {
          padding: .46rem 0;
          border-bottom: 1px solid #e1e1e1;
          &:first-child {
            padding-top: 0;

          }
          .check-txt {

          }
          .btn-watch {
            width: 1.2rem;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            font-size: .26rem;
            color: #fff;
            background-color: #0063AE;
            border-radius: .06rem;
          }

          .wrapper {
            position: relative;
            img {
              width: 1.2rem;
              height: .6rem;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              visibility: hidden;
            }
          }
        }
      }
    }

  }
</style>
